<template>
  <!-- //主页 -->
  <div>
    <!--顶部head -->
    <PageHead />
    <!-- 左侧组件列表 -->
    <PageLeft />
    <!-- 中间内容区域 -->
    <PageView />
    <!-- 右侧组件编辑区域 -->
    <PageRight/>
    <UploadImg :dialog-image-visible.sync="dialogImageVisible" @upLoadImgSuccess="upLoadImgSuccess"/>
  </div>
</template>

<script>
import PageHead from './components/PageHead.vue';
import PageLeft from './components/PageLeft.vue';
import PageRight from './components/PageRight.vue';
import PageView from './components/PageView.vue';
//公共的弹窗组件
import UploadImg from '@/components/BasicConfig/UpLoadImg.vue'
import { getCmsPageById } from '@/api/activity'
import { createRandomId } from '@/utils'


export default {
  components: {
    PageHead, PageLeft, PageRight, PageView,UploadImg
  },
  data() {
    return {}
  },
  methods: {
    //获取详情页数据
    getData() {
      //从url获取参数
      let { id } = this.$route.query
      //如果有id 说明进入的是编辑页面 否则进入新建页面
      if (id) {
        getCmsPageById(id).then(({ data }) => {
          // console.log(data, 'data数据啊');
          console.log('进入编辑页面');
          this.postDataToHS(data)
        })
      }

    },
    //处理后端返回的页面数据
    postDataToHS(data) {
      //对数据做容错处理
      if (data && data.componentList) {
        data.componentList.forEach(item => {
          console.log(item.id,'ididid');
          //如果有时间 类型为字符串 转为json类型
          if (item.data.validTime && typeof item.data.validTime === 'string') {
            item.data.validTime = JSON.parse(item.data.validTime)
          }
          //如果没有id 调用方法生成id
          if (!item.id) {
            //
            const id = createRandomId()
            item.id = item.data.component + '-' + id
            console.log(item.id,'ididid');
          }
        });
      }
      console.log({data},'postdata');
      this.$store.commit('UPDATE_COMPONENT',{ data })
      this.$store.commit('VIEW_UPDATE')
    },
    //公共上传组件给父组件传过来的数据
    upLoadImgSuccess(imgUrl){
         //判断这个方法是否存在 即判断是否成功上传
         if ( this.$store.state.upLoadImgSuccess) {
          //把数据传入store定义的方法
          console.log('方法存在哦',imgUrl);
          this.$store.state.upLoadImgSuccess(imgUrl)
         }
    }
  },
  created() {
    this.getData()
  },
  computed:{
    //控制公共图片上传弹窗的数据
    dialogImageVisible:{
      get:function(){
        return this.$store.state.dialogImageVisible
      },
      set:function(val){
           this.$store.commit('SET_UPIMAGE_VISIBLE',val)
      }
    }
  }
};
</script>